import React, { Component } from "react";

export default class MyTable extends Component {
  constructor(props) {
    super(props);
    console.log(props);
  }
  render() {
    return (
      <div>
        <table className="myTable">
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {this.props.books.map((item, index) => {
              return (
                <tr key={item.id}>
                  <td>{item.id}</td>
                  <td>《{item.name}》</td>
                  <td>{item.date}</td>
                  <td>{this.formartPrice(item.price)}</td>
                  <td>
                    <button
                      onClick={() => this.props.changeCount("add", index)}
                    >
                      +
                    </button>
                    <span style={{ margin: "0 5px" }}>{item.count}</span>
                    <button
                      onClick={() => this.props.changeCount("sub", index)}
                    >
                      -
                    </button>
                  </td>
                  <td>
                    <button onClick={() => this.props.removeBook(item.id)}>
                      移除
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }

  formartPrice(price) {
    return `￥${price}.00`;
  }
}
